<script setup>
import { useRoute, useRouter } from 'vue-router';
import { inject, onMounted, reactive, ref } from 'vue';

const route = useRouter();
const $http = inject('$http');
const newName = ref('');
const newPrincipal = ref('');
const newPrincipal_tel = ref('');
const newTel = ref('');
const isShow_addBox = ref(false);

const data = reactive({
    dataList: [],
})


async function getData() {
    const res = await $http.get('/deps');
    data.dataList = res.data.data.rows;
}

async function DeleteData(id) {
    if (confirm('确认删除吗？')) {
        try {
            await $http.delete(`/dep/${id}`)
        } catch (e) {
            alert('请求失败！');
            console.log(e.message);
        }
        getData();
    }

}

async function postNewData() {
    const newDataObj = {
        "name": newName.value,
        "principal": newPrincipal.value,
        "principal_tel": newPrincipal_tel.value,
        "tel": newTel.value
    }
    try {
        await $http.post('/dep', newDataObj)
    } catch (e) {
        console.log(e.message);
    }
    isShow_addBox.value = false;
    newName.value = '';
    newPrincipal.value = '';
    newPrincipal_tel.value = '';
    newTel.value = '';
    getData();
}

function toUserInfo(id) {
    // console.log(id);
    route.push({
        path: 'userinfo',
        query: {
            id: id,
        }
    })
}

onMounted(() => {
    getData();
})

</script>

<template>
    <h1>
        部门管理页面
        <button class="addBtn" @click="isShow_addBox = true">添加部门</button>
    </h1>
    <table>
        <thead>
            <tr>
                <th>部门序号</th>
                <th>部门名称</th>
                <th>部门负责人</th>
                <th>负责人电话</th>
                <th>部门电话</th>
                <th>详情</th>
            </tr>

        </thead>
        <tbody>
            <tr v-for="(item, index) in data.dataList" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.principal }}</td>
                <td>{{ item.principal_tel }}</td>
                <td>{{ item.tel }}</td>
                <td>
                    <a href="" @click.prevent="toUserInfo(item.id)">详情</a>
                    <span> / </span>
                    <a href="" @click.prevent="DeleteData(item.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="addBox" v-show="isShow_addBox">
        <h2>新增部门</h2>
        <p>部门名称：</p>
        <input type="text" v-model="newName">
        <p>部门负责人：</p>
        <input type="text" v-model="newPrincipal">
        <p>负责人电话：</p>
        <input type="text" v-model="newPrincipal_tel">
        <p>部门电话：</p>
        <input type="text" v-model="newTel">
        <button @click="postNewData">确定</button>
        <button @click="isShow_addBox = false">取消</button>
        <!-- asdsd -->
    </div>
</template>

<style scoped>
.addBtn {
    float: right;
    margin: 6px 20px;
}

.addBox {
    /* display: none; */
    position: absolute;
    left: 50%;
    margin-left: -250px;
    top: 50px;
    width: 500px;
    /* height: 400px; */
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px 0;
    background-color: #fff;
}

.addBox p {
    text-align: left;
    padding-left: 20px;
}

.addBox input {
    width: 400px;
    height: 25px;
    font-size: 16px;
    border-radius: 10px;
    padding: 5px;
    padding-left: 15px;
    border: .5px solid black;
}

.addBox button {
    cursor: pointer;
    margin: 20px;
    width: 100px;
    height: 30px;
}
</style>
